<!-- AdminOrderManagement.vue (最终安全版) -->

<template>
  <div class="order-management-container">
    <el-card>
      <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
        <el-table-column prop="orderId" label="订单号" width="80" />
        <el-table-column prop="username" label="用户" />
        <el-table-column prop="productName" label="商品" show-overflow-tooltip/>
        <el-table-column prop="totalAmount" label="总金额">
          <template #default="{ row }">
            <!--
              【【【  唯一的、关键的修改在这里！ 】】】
              我们先判断 row.totalAmount 是否存在，如果存在才调用 toFixed，否则显示 '--'
            -->
            ¥ {{ row.totalAmount ? row.totalAmount.toFixed(2) : '--' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            <el-tag :type="statusTag(row.status)">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" />

        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="{ row }">
            <el-button
                v-if="row.status === 0"
                size="small"
                type="danger"
                link
                :icon="Close"
                @click="handleCancel(row)"
            >
              取消订单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Close } from '@element-plus/icons-vue';
import { getAllOrders, cancelOrder } from '@/api/admin/order';
import { ElMessage, ElMessageBox } from 'element-plus';

const loading = ref(false);
const tableData = ref([]);

const fetchData = async () => {
  loading.value = true;
  try {
    const res = await getAllOrders();
    if (res.code == 200) {
      tableData.value = res.data;
    } else {
      ElMessage.error(res.message || '获取订单列表失败');
    }
  } catch(error) {
    console.error("获取订单列表失败:", error);
    ElMessage.error('网络请求失败');
  } finally {
    loading.value = false;
  }
};

const statusText = (status) => {
  switch (status) {
    case 0: return '未支付';
    case 1: return '已支付';
    case 2: return '已取消 (用户)';
    case 3: return '已取消 (系统)';
    default: return '未知状态';
  }
};

const statusTag = (status) => {
  switch (status) {
    case 0: return 'warning';
    case 1: return 'success';
    case 2: return 'info';
    case 3: return 'danger';
    default: return '';
  }
};

const handleCancel = (row) => {
  ElMessageBox.confirm(`确定要取消用户【${row.username}】的这份订单 (ID: ${row.orderId}) 吗？此操作不可逆！`, '高危操作确认', {
    type: 'warning'
  }).then(async () => {
    const res = await cancelOrder({ orderId: row.orderId });
    if(res.code == 200){
      ElMessage.success('订单取消成功！');
      fetchData();
    } else {
      ElMessage.error(res.message || '操作失败');
    }
  }).catch(() => {
    ElMessage.info('已取消操作');
  });
};

onMounted(fetchData);
</script>

<style scoped>
.order-management-container {
  padding: 20px;
}
.el-card {
  border-radius: 8px;
}
</style>